<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用class控制元素的显示与隐藏</title>
    <style>
        .show{
            display: block;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <p class="tip show">我要改掉熬夜的坏习惯</p>
    <p class="tip hidden">我现在习惯早睡早起了</p><!--TODO 怎么实现切换显示-->
    <button class="toggle">切换</button>
    <script>
        let toggleBtn = document.querySelector('.toggle');
        let tipEle = document.querySelector('.tip');

        toggleBtn.addEventListener('click',function () {
            let className = tipEle.className;

            if (className.indexOf('show') > -1){
                tipEle.className = 'tip hidden';
                return;
            }
            tipEle.className = 'tip show';
        })
    </script>
</body>
</html>